﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/Mobile/sitestyle.css" />

  <!--  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" ></script>  
  --> <!-- <script type="text/javascript" src="Scripts/jquery-ui-1.8.11.js" ></script>  -->
    <script type="text/javascript" src="Scripts/jquery-1.8.0.js" ></script>  
    <script type="text/javascript" src="Scripts/jquery.ui.core.js" ></script>  
    <script type="text/javascript" src="Scripts/jquery.ui.widget.js" ></script>  
    <script type="text/javascript" src="Scripts/jquery.ui.position.js" ></script>  
    <script type="text/javascript" src="Scripts/jquery.ui.autocomplete.js" ></script>  

</head>
<body>

	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#city { width: 25em; }
	</style>
	<script>
	    $(function () {
	        function log(message) {
	            $("<div/>").text(message).prependTo("#log");
	            $("#log").scrollTop(0);
	        }

	        $("#city").autocomplete({
	            source: function (request, response) {
	                $.ajax({
	                    url: "http://ws.geonames.org/searchJSON",
	                    dataType: "jsonp",
	                    data: {
	                        featureClass: "P",
	                        style: "full",
	                        maxRows: 12,
	                        name_startsWith: request.term
	                    },
	                    success: function (data) {
	                        response($.map(data.geonames, function (item) {
	                            return {
	                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
	                                value: item.name
	                            }
	                        }));
	                    }
	                });
	            },
	            minLength: 2,
	            select: function (event, ui) {
	                log(ui.item ?
                        "Selected: " + ui.item.label :
                        "Nothing selected, input was " + this.value);
	            },
	            open: function () {
	                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
	            },
	            close: function () {
	                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
	            }
	        });
	    });
	</script>



<div class="demo">

<div class="ui-widget">
	<label for="city">Your city: </label>
	<input id="city" />
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->

</body>
</html>

